<template>
	<view>
		<view class="loading" v-if="loading">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
	</view>
</template>

<script>
	import { Provider } from "@idealight-labs/anyweb-js-sdk";
	var wv; //计划创建的webview
	export default {
		data() {
			return {
				loading: true
			}
		},
		async onLoad(opt) { //在h5端中会有些不同，在h5中要拿由h5端回来的数据是这样子弄的
			console.log("onLoad")
			// #ifdef H5
			window.addEventListener('handlePostMessage1', function(e) {
				if (e.data.data.name == "postMessage") {
					console.log(e.data.data.arg)
				}
			}, false)
			// #endif
			const provider = new Provider({
			  // logger: console,
			  appId: "ed6f4342-3a51-4b87-bd47-02ff13a04962",
			});
			
			provider.on("ready", () => {
			  console.log("SDK 初始化完成 可以调用接口方法");
			});
			
			const data = await provider.request({
			    method: "cfx_accounts",
			    params: [
			      {
			        availableNetwork: [1, 1029],
			        scopes: ["baseInfo", "identity"],
			      },
			    ],
			  });
			  
			  console.log(data.address[0])
			  uni.setStorageSync('ANYWEBINFO', data);
			  uni.switchTab({
			  	url: '/pages/My/My'
			  })
		},
		onShow() {
			console.log("onShow")
		},
		created() {
			console.log("created")
		},
		onReady() {
			console.log("onReady")
		},
		methods: {
			handlePostMessage1(data) {
				console.log('从H5端接受的数据', data);
				console.log("接收到消息：" + JSON.stringify(data));
				uni.switchTab({
					url: '/pages/My/My'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	/* 设置位置 */
	.loading {
		position: absolute;
		/* 居中 */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 高度 */
		height: 40px;
		/* 弹性布局 */
		display: flex;
		/* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
		align-items: center;
	}

	/* 小竖条 */
	.item {
		height: 50px;
		background-color: $echo-main-color;
		width: 5px;
		/* 加margin，使竖条之间有空隙 */
		margin: 0px 3px;
		/* 圆角 */
		border-radius: 10px;
		/* 动画：名称、时间、循环 */
		animation: loading 1s infinite;
	}

	/* 设置动画 */
	@keyframes loading {
		0% {
			height: 0px;
		}

		50% {
			height: 50px;
		}

		100% {
			height: 0px;
		}
	}

	/* 为每一个竖条设置延时 */
	.item:nth-child(2) {
		animation-delay: 0.1s;
	}

	.item:nth-child(3) {
		animation-delay: 0.2s;
	}

	.item:nth-child(4) {
		animation-delay: 0.3s;
	}

	.item:nth-child(5) {
		animation-delay: 0.4s;
	}

	.item:nth-child(6) {
		animation-delay: 0.5s;
	}

	.item:nth-child(7) {
		animation-delay: 0.6s;
	}

	.item:nth-child(8) {
		animation-delay: 0.7s;
	}
</style>
